<template>
    <div class="wrap">
        <loginHeader></loginHeader>
        <div class="conBj">
            <!--logo部分-->
            <div style="background:#ffffff;">
                <div class="logo">
                    <img class="logo" src="../../assets/img/login/LoginLOGO.png" alt="">
                    <p class="headerTxt">用户注册</p>
                </div>
            </div>
            <div class="content">
                <div class="conList">
                    <div class="ListOne ListDiv">
                        <p :class="index == 1? 'ListDivTxtS ListDivOne': 'ListDivOne'">1</p>
                        <div class="ListDivTwo">
                            <p>选择开店类型</p>
                            <p>个人店铺</p>
                        </div>
                    </div>
                    <img class="ListDivImg" src="./../../assets/img/login/SetShopList.png" alt="">
                    <div class="ListTwo ListDiv">
                        <p :class="index == 2? 'ListDivTxtS ListDivOne': 'ListDivOne'">2</p>
                        <div class="ListDivTwo">
                            <p>阅读开店须知</p>
                            <p>确认自己符合个人店铺的相关规定</p>
                        </div>
                    </div>
                    <img class="ListDivImg" src="./../../assets/img/login/SetShopList.png" alt="">
                    <div class="ListThree ListDiv">
                        <p :class="index == 3? 'ListDivTxtS ListDivOne': 'ListDivOne'">3</p>
                        <div class="ListDivTwo">
                            <p>申请开店认证</p>
                            <p>需提供认证相关资料，等待审核通过。</p>
                        </div>
                    </div>
                </div>
                <!---------------------------------------------------------------步骤一,选择个人店铺-->
                <div class="steps stepsOne" v-if="index == 1">
                    <img src="./../../assets/img/login/SetShopOneUser.png" alt="">
                    <p>通过个人实名认证的商家创建的店铺</p>
                    <p>就是个人店铺</p>
                    <div class="toTwo" @click="toTwo">创建个人店铺</div>
                </div>
                <!---------------------------------------------------------------步骤二,阅读开店须知-->
                <div class="steps stepsTwo" v-if="index == 2">
                    <div class="TwoTxts">
                        1、我在已经开了个店了，我用别人的身份证再开一个店可以吗？<br>
                        答：不可以。未经平台同意，将本人账号提供给他人做开店使用，由此导致相关争议，诉讼及因店铺经营中的违法违规行为导致一切人身，财产权益损害，<br>
                        均由本人自行承担全部民事、行政及刑事责任。<br>

                        2、开企业店铺需要满足什么条件？<br>
                        答：企业开店需完成责任人认证，店铺负责人需要对该店铺的运营及管理全面负责，包含但不限于：该企业的法定代表人、股东、淘宝店铺的运营人等，具体<br>
                        请参考：企业店铺开店流程。<br>

                        3、我可以开多个店铺吗？<br>
                        答：同一会员已开设的店铺均须同时满足以下要求，才能获得多店权益：<br>
                        （一）近365天无出售假冒商品违规、严重违规、一般违规扣分达12分（含）以上等违规记录，且无其他风险特征；<br>
                        （二）满足一定经营条件（如近365天确认收货金额>=120万且近12个自然月持续有成交）<br>

                        4、我已经开过店，现在想要注销原来的店铺重新开店，可以吗?<br>
                        答：满足条件就可以注销。具体请参考：如何注销店铺。<br>
                    </div>
                    <div class="TwoBtns">
                        <span @click="toOne">上一步</span>
                        <span @click="ToThree">我已阅读了解，继续开店</span>
                    </div>
                </div>
                <!---------------------------------------------------------------步骤三,申请开店认证-->
                <div class="steps stepsThree" v-if="index == 3">
                    <div class="ThreeWrap">
                        <!--<div class="ThreeTop">-->
                            <div class="ThreeDiv">
                                <img src="./../../assets/img/login/SetShopThreeOne.png" alt="">
                                <span>请上传身份证正面照片</span>
                            </div>
                            <div class="ThreeDiv">
                                <img src="./../../assets/img/login/SetShopThreeOne.png" alt="">
                                <span>请上传身份证反面照片</span>
                            </div>
                            <div class="ThreeDiv">
                                <img src="./../../assets/img/login/SetShopThreeOne.png" alt="">
                                <span>请上传手持身份证照片</span>
                            </div>
                        <!--</div>-->
                        <!--<div class="ThreeBottom">-->
                            <div class="ThreeDiv">
                                <img src="./../../assets/img/login/SetShopThreeTwo.png" alt="">
                                <span>支付宝认证</span>
                            </div>
                            <div class="ThreeDiv">
                                <img src="./../../assets/img/login/SetShopThreeThree.png" alt="">
                                <span>请上传银行卡正面照片</span>
                            </div>
                            <div class="ThreeDiv">
                                <img src="./../../assets/img/login/SetShopThreeThree.png" alt="">
                                <span>请上传银行卡背面照片</span>
                            </div>
                        <!--</div>-->
                    </div>
                    <p class="SetShopOK" @click="readTxtBlock">申请开店、阅读承诺书</p>
                    <!-- 上传图片 -->
                    <div class="imgWrap">
                        <div class="imgOne imgDiv">
                            <!--上传图片原生-->
                            <input type="file" id="fileOne" class="" @change="changepic($event,1)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <img class="" v-if="imageUrlOne" :src="imageUrlOne" alt="">
                        </div>
                        <div class="imgTwo imgDiv">
                            <!--上传图片原生-->
                            <input type="file" id="fileTwo" class="" @change="changepic($event,2)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <img class="" v-if="imageUrlTwo" :src="imageUrlTwo" alt="">
                        </div>
                        <div class="imgTwo imgDiv">
                            <!--上传图片原生-->
                            <input type="file" id="fileThree" class="" @change="changepic($event,3)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <img class="" v-if="imageUrlThree" :src="imageUrlThree" alt="">
                        </div>
                        <!-- 支付宝认证 -->
                        <div class="imgTwo imgDiv">

                        </div>
                        <div class="imgTwo imgDiv">
                            <!--上传图片原生-->
                            <input type="file" id="fileFour" class="" @change="changepic($event,4)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <img class="" v-if="imageUrlFour" :src="imageUrlFour" alt="">
                        </div>
                        <div class="imgTwo imgDiv">
                            <!--上传图片原生-->
                            <input type="file" id="fileFive" class="" @change="changepic($event,5)" accept="image/jpg,image/jpeg,image/png,image/PNG">
                            <img class="" v-if="imageUrlFive" :src="imageUrlFive" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <loginFooter></loginFooter>
        <!----------------------------------------------------------阅读承诺书-->
        <div :class="isReadTxt? 'readTxt Block': 'readTxt None'">
            <div class="TxtContent">
                <iframe src="https://www.baidu.com/" width="100%" height="90%" frameborder="0" scrolling="auto"></iframe>
                <p class="TxtTen">
                    <span @click="readTxtNoneNO">不同意</span>
                    <span @click="readTxtNoneYES">同意</span>
                </p>
            </div>
        </div>
        <!-------------------------------------------------------------------------------------------------显示审核状态-->
        <div :class="auditStatus == 0? 'auditStatus None': 'auditStatus'">
            <!-------------------------------------------------------------------------------上传成功,等待审核-->
            <div class="StatusDiv StatusDivOne" v-if="auditStatus == 1">
                <img src="./../../assets/img/login/SetShopStatusOne.png" alt="">
                <span>上传成功,等待审核</span>
            </div>
            <!--------------------------------------------------------------------------------------审核通过-->
            <div class="StatusDiv StatusDivTwo" v-if="auditStatus == 2">
                <img src="./../../assets/img/login/SetShopStatusOne.png" alt="">
                <span>恭喜!您的资质审核通过!</span>
                <p class="toShopCenter">进入商家中心</p>
            </div>
            <!--------------------------------------------------------------------------------------正在审核中-->
            <div class="StatusDiv StatusDivThree" v-if="auditStatus == 3">
                <img src="./../../assets/img/login/SetShopStatusOne.png" alt="">
                <span>您的资质正在审核中……</span>
            </div>
            <!--------------------------------------------------------------------------------------审核失败-->
            <div class="StatusDiv StatusDivFour" v-if="auditStatus == 4">
                <img src="./../../assets/img/login/SetShopStatusOne.png" alt="">
                <span>您的资质未通过审核！</span>
                <p class="toAgain" @click="againSet">再次申请>></p>
            </div>
        </div>
    </div>
</template>

<script>
    import  loginHeader  from "./LoginHeader";
    import  loginFooter  from "./LoginFooter";
    export default {
        name: "setShop",
        components:{
            loginHeader,
            loginFooter
        },
        data(){
            return {
                // 当前所在步骤
                index: 1,
                // 判断阅读承诺书遮罩层显示隐藏
                isReadTxt: false,
                // 审核状态auditStatus: (0: 没在审核状态)(1: 上传成功,等待审核)(2: 审核通过)(3: 正在审核)(4: 审核失败)
                auditStatus: 0,
                //上传身份证正面图片
                fileOne:'',
                imageUrlOne:'',
                imageUrlTwo:'',
                imageUrlThree:'',
                imageUrlFour:'',
                imageUrlFive:'',
            }
        },
        methods:{
            // 回到第一步
            toOne(){
                this.index = 1;
            },
            // 创建个人店铺:步骤一变步骤二
            toTwo(){
                this.index = 2;
            },
            // 阅读开店须知:步骤二变步骤三
            ToThree(){
                this.index = 3;
            },
            // 阅读承诺书遮罩层显示
            readTxtBlock(){
                this.isReadTxt = true;
            },
            // 不同意阅读承诺书遮罩层隐藏
            readTxtNoneNO(){
                this.isReadTxt = false;
            },
            //同意阅读承诺书遮罩层隐藏
            readTxtNoneYES(){
                this.isReadTxt = false;
                // 审核状态auditStatus(4: 审核失败)
                this.auditStatus = 4;
            },
            // 选择图片
            changepic(el,index) {
                // var that = this;
                // var reads = new FileReader();
                // var file = el.target.files[0];
                // that.fileOne = file;
                // reads.readAsDataURL(file);
                // reads.onload = function(e) {
                console.log(index);
                switch(index) {
                    case 1:
                        this.imageUrlOne = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565168378688&di=2ca825e53dadf074d24ef1ec1bb54096&imgtype=0&src=http%3A%2F%2Fwww.cpd.com.cn%2Fn15737398%2Fn26490097%2F201711%2FW020180119113354065027.png";
                        break;
                    case 2:
                        this.imageUrlTwo = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565168378688&di=2ca825e53dadf074d24ef1ec1bb54096&imgtype=0&src=http%3A%2F%2Fwww.cpd.com.cn%2Fn15737398%2Fn26490097%2F201711%2FW020180119113354065027.png";
                        break;
                    case 3:
                        this.imageUrlThree = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565168378688&di=2ca825e53dadf074d24ef1ec1bb54096&imgtype=0&src=http%3A%2F%2Fwww.cpd.com.cn%2Fn15737398%2Fn26490097%2F201711%2FW020180119113354065027.png";
                        break;
                    case 4:
                        this.imageUrlFour = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565168378688&di=2ca825e53dadf074d24ef1ec1bb54096&imgtype=0&src=http%3A%2F%2Fwww.cpd.com.cn%2Fn15737398%2Fn26490097%2F201711%2FW020180119113354065027.png";
                        break;
                    case 5:
                        this.imageUrlFive = "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565168378688&di=2ca825e53dadf074d24ef1ec1bb54096&imgtype=0&src=http%3A%2F%2Fwww.cpd.com.cn%2Fn15737398%2Fn26490097%2F201711%2FW020180119113354065027.png";
                        break;
                    default:

                }
                // };
            },
            // 重新申请
            againSet(){
                // 回到第一步
                this.index = 1;
                // 审核状态auditStatus(0: 没在审核状态)
                this.auditStatus = 0;
            }
        },
        mounted(){

        }
    }
</script>

<style scoped>

    .wrap{
        overflow: hidden;
    }
    .conBj{
        background: #EAEAEA;
    }
    /*中心内容*/
    .content{
        width: 1200px;
        height: 713px;
        margin: 0 auto;
        padding: 0;
        overflow: hidden;
    }
    /*logo部分*/
    .logo{
        width: 1200px;
        height: 90px;
        margin: 0 auto;
        background: #ffffff;
    }
    .logo .logo{
        width: 61px;
        height: 56px;
        margin-top: 19px;
        float: left;
    }
    .logo .headerTxt{
        float: left;
        font-size:26px;
        font-family: 微软雅黑;
        font-weight:500;
        line-height: 90px;
        margin-left: 10px;
        color:rgba(51,51,51,1);
    }
    /*步骤条*/
    .conList{
        width: 100%;
        height: 147px;
         background: url("./../../assets/img/login/SetShopListBJ.png");
        background-size: 100% 100%;
        display: flex;
        justify-content: space-around;
    }
    .ListDiv{
        width: 310px;
    }
    .ListDivOne{
        float: left;
        font-size: 85px;
        line-height: 147px;
        color: #FFFFFF;
    }
    .ListDivTwo{
        float: left;
        font-size: 14px;
        line-height: 30px;
        padding: 30px 0;
        margin-left: 20px;
    }
    .ListDivTwo p:nth-child(1){
        font-size: 20px;
        line-height: 50px;
        font-weight:700;
        color: #ffffff;
    }
    /*选中步骤1,2,3样式*/
    .ListDivTxtS{
        color: #000000;
    }
    /*步骤一样式*/
    .stepsOne{
        text-align: center;
    }
    .stepsOne img{
        width: 123px;
        height: 123px;
        margin-top: 90px;
    }
    .stepsOne p{
        font-size:16px;
        line-height: 30px;
        font-weight:500;
        color:rgba(1,1,1,1);
    }
    .toTwo{
        width: 442px;
        height: 70px;
        line-height: 60px;
        font-weight:800;
        color:rgba(255,255,255,1);
        margin: 50px auto 0;
         background: url("./../../assets/img/login/SetShopOneToTwo.png");
        background-size: 100% 100%;
        cursor: pointer;
    }
    /*步骤二样式*/
    .TwoTxts{
        width:1160px;
        height:260px;
        font-size: 16px;
        line-height: 30px;
        background:rgba(255,255,255,1);
        border:1px dashed rgba(160,160,160,1);
        padding: 14px 18px;
        margin: 26px auto 0;
        overflow: auto;
    }
    .TwoBtns{
        width: 600px;
        margin: 20px auto 0;
    }
    .TwoBtns span{
        display: inline-block;
        width: 183px;
        height: 57px;
        line-height: 57px;
        text-align: center;
        font-size:23px;
        font-weight:800;
        color: #ffffff;
        border-radius: 5px;
        background: -moz-linear-gradient(top, #fc3f0c 0%, #e7261b 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc3f0c), color-stop(100%,#e7261b));
        background: -webkit-linear-gradient(top, #fc3f0c 0%,#e7261b 100%);
        background: -o-linear-gradient(top, #fc3f0c 0%,#e7261b 100%);
        background: -ms-linear-gradient(top, #fc3f0c 0%,#e7261b 100%);
        background: linear-gradient(to bottom, #fc3f0c 0%,#e7261b 100%);
        cursor: pointer;
    }
    .TwoBtns span:nth-child(2){
        width: 310px;
        float: right;
    }
    /*步骤三样式*/
    .stepsThree{
        position: relative;
    }
    .ThreeWrap{
        width:1136px;
        padding: 0 30px;
        height:270px;
        margin: 13px auto 0;
        background:rgba(255,255,255,1);
        border:2px solid rgba(160,160,160,1);
        overflow: hidden;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }
    .ThreeWrap .ThreeDiv{
        width: 340px;
        height: 128px;
        line-height: 128px;
        text-align: center;
    }
    .ThreeWrap .ThreeDiv img{
        position: relative;
        top: 10px;
        cursor: pointer;
    }
    .ThreeWrap .ThreeDiv span{
        display: inline-block;
        width: 170px;
        height: 28px;
        line-height: 28px;
        text-align: left;
        margin-left: 14px;
        background:rgba(240,240,240,1);
        border-radius:5px;
        text-indent: 5px;
        cursor: pointer;
    }
    .SetShopOK{
        width: 444px;
        height: 72px;
        line-height: 72px;
        border-radius: 5px;
        text-align: center;
        color: #ffffff;
        font-size: 23px;
        background: -moz-linear-gradient(top, #fc3f0c 0%, #e7261b 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fc3f0c), color-stop(100%,#e7261b));
        background: -webkit-linear-gradient(top, #fc3f0c 0%,#e7261b 100%);
        background: -o-linear-gradient(top, #fc3f0c 0%,#e7261b 100%);
        background: -ms-linear-gradient(top, #fc3f0c 0%,#e7261b 100%);
        background: linear-gradient(to bottom, #fc3f0c 0%,#e7261b 100%);
        margin: 50px auto 0;
        cursor: pointer;
        font-family: "注册页字体";
    }

    /*阅读承诺书 蒙版框*/
    .readTxt{
        position: absolute;
        z-index: 50;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0,0,0,0.6);
        display: none;
    }
    .TxtContent{
        width:662px;
        height:620px;
        margin: 128px auto 0;
        padding: 10px 30px;
        background:rgba(255,255,255,1);
        overflow: hidden;
    }
    .TxtOne{
        height: 40px;
        line-height: 40px;
        font-size:14px;
        font-weight:800;
        color:rgba(81,81,81,1);
    }
    .TxtTwo, .TxtFour, .TxtSix, .TxtEight{
        height: 25px;
        line-height: 25px;
        font-size:12px;
        font-weight:800;
        color:#515151;
    }
    .TxtThree, .TxtFive, .TxtSeven, .TxtNine{
        width:593px;
        height:104px;
        font-size: 12px;
        color: #646464;
        line-height: 20px;
        padding: 10px 10px 0;
        background:rgba(255,255,255,1);
        border:1px solid rgba(3,0,0,1);
        overflow: auto;
        margin: 5px 0;
    }
    .TxtFive{
        height: 79px;
    }
    .TxtSeven{
        height: 45px;
    }
    .TxtNine{
        height: 79px;
    }
    .TxtTen{
        width: 180px;
        text-align: center;
        margin: 20px auto 0;
        display: flex;
        justify-content: space-around;
    }
    .TxtTen span{
        display: inline-block;
        width:62px;
        height:23px;
        line-height: 23px;
        font-size: 12px;
        background:rgba(225,255,255,1);
        border:1px solid rgba(3,0,0,1);
        cursor: pointer;
    }
    .TxtTen span:nth-child(2){
        color: #ffffff;
        background:rgba(22,208,255,1);
    }
    /*显示审核状态auditStatus*/
    .auditStatus {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.6);
        /*display: none;*/
    }
    .StatusDiv{
        position: relative;
        z-index: 40;
        width:708px;
        height:303px;
        margin: 300px auto 0;
        background:rgba(251,100,81,1);
        border-radius:20px;
    }
    /*审核状态auditStatus第一种: 上传成功,等待审核*/
    .StatusDiv{
        text-align: center;
        line-height: 303px;
    }
    .StatusDiv img{
        display: inline-block;
        width: 49px;
        height: 49px;
        position: relative;
        top: 15px;
        margin-right: 19px;
    }
    .StatusDiv span{
        display: inline-block;
        font-size: 25px;
        font-weight: 800;
        color: rgba(255,255,255,1);
    }
    .StatusDivTwo, .StatusDivThree, .StatusDivFour{
        /*background: #EAEAEA;*/
    }
    /*进入商家中心，再次申请*/
    .toShopCenter, .toAgain{
        position: relative;
        top: -100px;
        font-size: 18px;
        color: #ffffff;
        text-decoration:#807070 underline;
        line-height: 20px;
        cursor: pointer;
    }

    /* 上传图片内容 */
    .imgWrap{
        width:1136px;
        padding: 0 30px;
        height:270px;
        position: absolute;
        top: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
    }
    .imgDiv{
        width: 350px;
        height: 120px;
        position: relative;
    }
    .imgDiv input{
        width: 250px;
        height: 80px;
        background: red;
        margin-top: 15px;
        margin-left: 50px;
        opacity: 0;
        position: relative;
        z-index: 20;
        cursor: pointer;
    }
    .imgDiv img{
        width: 190px;
        height: 80px;
        background: red;
        position: absolute;
        z-index: 10;
        top: 15px;
        left: 110px;
    }












    /*控制阅读承诺书遮罩显示隐藏Class*/
    .Block{
        display: block;
    }
    .None{
        display: none;
    }
</style>
